<script setup lang="ts">
import { verificationFn } from '@/api/register';
import { userrequsertFn } from '@/api/UserApi';
import qq from '@/assets/qq.svg'
import wx from '@/assets/WX.svg'
import xl from '@/assets/XL.svg'
import { useStore } from '@/stores/user';
import { data } from '@volcengine/openapi/lib/services/vikingdb';
import { showToast } from 'vant';
import type { Ref } from 'vue';
import { computed, provide, ref } from 'vue';
import { useRouter } from 'vue-router';

const useremail: Ref<string> = ref('')
const username: Ref<string> = ref('')
const password: Ref<string> = ref('')
const nextpassword: Ref<string> = ref('')
const disabled: Ref<boolean> = ref(true)



interface iMessage {
    required: boolean,
    message: string
}

// const message: Ref<iMessage[]> = ref([{ required: true, message: '请填写手机号' }])
const messageerr: Ref<string> = ref('')


const store = useStore()
const router = useRouter()

// if (password.value == nextpassword.value && password.value) {
//     disabled.value = false
// }

const discom = computed(() => {
    return password.value == nextpassword.value && password.value && username.value ? disabled.value = false : disabled.value
})



function nextClick() {

    if (/^(?:(?:\+|00)86)?1\d{10}$/.test(username.value)) {
        if (/^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\W_!@#$%^&*`~()-+=]+$)(?![0-9\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\W_!@#$%^&*`~()-+=]/.test(password.value)) {

            if (/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(useremail.value)) {
                store.changStore({

                    username: username.value,
                    password: password.value,
                    useremail: useremail.value,
                    phone: username.value
                })
                router.push('/register/path2')
            } else {
                showToast('邮箱格式错误')
                useremail.value = ''

            }

        } else {
            showToast('密码最少6位,包含英文、数字、特殊字符串')
            password.value = ''
            nextpassword.value = ''
        }
    } else {
        showToast('用户名格式有误')
        username.value = ''
    }
}

</script>


<template>
    <div class="navtop">
        <van-nav-bar left-arrow @click-left="$router.back()" z-index="99" fixed :border="false" placeholder
            safe-area-inset-top />
        <div class="registerBox">

            <div class="titlebox">
                <h1>注册</h1>
                <p>完成下面信息，开始使用吧！</p>
            </div>

            <van-form>
                <van-cell-group inset>
                    <van-field size="large" center v-model="username" name="请输入姓名" placeholder="请输入姓名"
                        :rules="[{ required: true, message: '请输入姓名' }]" />
                </van-cell-group>
                <van-cell-group inset>
                    <van-field size="large" center v-model="useremail" name="请填写邮箱" placeholder="请填写邮箱"
                        :rules="[{ required: true, message: '请填写邮箱' }]" :error-message="messageerr" />
                </van-cell-group>
                <van-cell-group inset>
                    <van-field center v-model="password" type="password" name="密码" placeholder="密码"
                        :rules="[{ required: true, message: '请填写密码' }]" />
                </van-cell-group>
                <van-cell-group inset>
                    <van-field center v-model="nextpassword" type="password" name="确认密码" placeholder="确认密码"
                        :rules="[{ required: true, message: '请填写确认密码' }]" />
                </van-cell-group>

                <div style="margin: 16px;">
                    <van-button :disabled="discom" @click="nextClick" block type="primary">
                        下一步
                    </van-button>
                </div>
            </van-form>

            <footer>
                <van-divider>第三方账号登录</van-divider>

                <div class="linkbtn">
                    <van-button color="#fff" :icon="qq" type="primary" />
                    <van-button color="#fff" :icon="wx" type="primary" />
                    <van-button color="#fff" :icon="xl" type="primary" />
                </div>
            </footer>

        </div>
    </div>
</template>


<style lang="scss" scoped>
.navtop {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    --van-nav-bar-background: rgbr(0, 0, 0, 0);
}

.registerBox {
    height: 80%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    .titlebox {
        width: 80%;
        display: flex;
        flex-direction: column;
        align-items: left;
        margin-top: 20%;

        h1 {
            // font-size: 40px;
            font-weight: 400;
            margin: 0;
        }

        p {
            color: #616161;
        }

    }

    .van-form {
        width: 80%;
    }

    .van-cell-group {
        margin: 0;
        margin-bottom: 20px;
        // height: 50px;
    }

    .wpsd {
        position: relative;
        left: 240px;
    }

    footer {
        width: 100%;
        display: flex;
        flex-direction: column;
        // justify-content: center;
        align-items: center;

        .linkbtn {
            width: 70%;
            display: flex;
            justify-content: space-around;
        }
    }

}
</style>